$(document).ready(function() {
    // Initialize jsTree for Directory 1
    $('#tree1').jstree({
        'core': {
            'data': {
                'url': function(node) {
                    return '/api/directories/list?path=' + (node.id === '#' ? '/' : node.id);
                },
                'data': function(node) {
                    return { 'id': node.id };
                }
            }
        }
    });

    // Initialize jsTree for Directory 2
    $('#tree2').jstree({
        'core': {
            'data': {
                'url': function(node) {
                    return '/api/directories/list?path=' + (node.id === '#' ? '/' : node.id);
                },
                'data': function(node) {
                    return { 'id': node.id };
                }
            }
        }
    });

    // Handle directory selection
    $('#select').click(function() {
        const selected1 = $('#tree1').jstree('get_selected');
        const selected2 = $('#tree2').jstree('get_selected');

        if (selected1.length === 0 || selected2.length === 0) {
            alert('Please select a directory from both trees.');
            return;
        }

        const dir1 = selected1[0];
        const dir2 = selected2[0];

        $.post('/api/directories/select', { dir1: dir1, dir2: dir2 }, function(response) {
            alert(response);
        });
    });
});
